<template>
  <div class="left-top">
    <div class="headersleft">
      <div class="headers_left">
        <span>栏目信息</span>
      </div>
      <div class="headers_right">
        <div
          v-for="(item, index) in titles"
          :key="index"
          class="headers_right_title"
          :class="{ selected: selectedTitle === item }"
          @click="selectTitle(item)"
        >
          {{ item .moduleName}}
        </div>
      </div>
    </div>
    <el-row class="content">
      <el-col class="content_right">
        <ul>
          <li
            v-for="(item, index) in messageList"
            :key="index"
            @mouseenter="hoverIndex = index"
            @mouseleave="hoverIndex = -1"
            :class="{ hovered: hoverIndex === index }"
           
          >
            <span
              :style="{
                width: '6px',
                height: '6px',
                background: item.isNew ? '#E85245' : '#BBBBBB',
                borderRadius: '3px',
                display: 'inline-block',
                marginRight: '8px',
              }"
            ></span>
            <div class="titles-wrapper">
              <span class="titles" @click="toopen(item)">{{ item.title }}

                <img
                v-if="isNewItem(item.createTimeExtDataTime)"
                src="../../assets/img/new.png"
                alt="New"
                class="new-icon"
              />
              </span>
              
            </div>
          
            <span class="date">{{ item.createTime }}</span>
          </li>
        </ul>
      </el-col>
    </el-row>
    <div class="bottom" @click="MediaRecorder()"> <span>更多 ></span></div>
  </div>
</template>



<script>
import { getNavbar } from "@/api/index";
import dayjs from 'dayjs';
export default {
  name: "LeftTop",
  data() {
    return {
      messageList:[],
      titles: [
        "企业制度",
        "运营监控",
        "销售辅助",
        "体系管理",
        "会议纪要",
        "校服栏目",
        "组织权限通讯",
      ],
      selectedTitle: null, // 用于存储选中的标题
      hoverIndex: -1,
      items: [
        { title: "优先级 1 - 系统更新", isNew: true, date: "2024-10-21" },
        { title: "优先级 2 - 服务器维护", isNew: false, date: "2024-10-20" },
        { title: "优先级 3 - 数据备份", isNew: true, date: "2024-10-19" },
        { title: "优先级 4 - 用户反馈总结", isNew: false, date: "2024-10-18" },
        { title: "优先级 5 - 新功能发布", isNew: true, date: "2024-10-17" },
        { title: "优先级 6 - 安全补丁更新", isNew: false, date: "2024-10-16" },
        { title: "优先级 7 - 性能优化计划", isNew: true, date: "2024-10-15" },
        {
          title: "优先级 8 - 开发者大会安排",
          isNew: false,
          date: "2024-10-14",
        },
        { title: "优先级 9 - 移动端适配测试", isNew: true, date: "2024-10-13" },
        { title: "优先级 10 - 客户培训会", isNew: false, date: "2024-10-12" },
      ],
    };
  },
  mounted() {
    this.getlist();

  
  },
  methods: {
    isNewItem(createTime) {
    // 当前日期
    const now = dayjs();

    // 将传入的 createTime 转为 dayjs 对象
    const itemDate = dayjs(createTime);

    // 计算当前日期与传入日期的差距，单位为天
    const daysDifference = now.diff(itemDate, 'day'); // 'day' 表示按天比较

    // 如果差距小于或等于7天，则返回 true
    return daysDifference <= 7;
  },
    MediaRecorder(){
      window.open( window.portalPath+ "/r/w?sid="+window.sid+"&cmd=com.actionsoft.apps.cms_site&siteid=635782b9-9acc-4bd1-9c1f-760774874e49&moduleid=" +this.selectedTitle.moduleId, "_blank");

    },
    toopen(item){
      window.open( window.portalPath+ "/r/w?sid="+window.sid+"&cmd=com.actionsoft.apps.cms_get_message&messageId=" + item.id, "_blank");
    },
    
    getlist() {
      var param = {
        sid: window.sid,
        cmd: "com.bono.portal.getCmsMoudle",
    
      };
      getNavbar(param).then((res) => {
   
        const { result, msg, data, id } = res;
        this.titles=res.data.moduleList;
        this.selectedTitle=res.data.moduleList[0];
        this.getlistbox();
        // this.shortCuts = res.data.shortCuts;
      });
    },
    //获取数据列表
    getlistbox() {
    
      var param = {
        sid: window.sid,
        cmd: "com.bono.portal.getCmsMoudleInfoById",
    
        moudleId:this.selectedTitle.moduleId,
    
      };
      getNavbar(param).then((res) => {
 
        const { result, msg, data, id } = res;
        this.messageList=res.data.messageList;

        // this.shortCuts = res.data.shortCuts;
      });
    },
    selectTitle(title) {
      this.selectedTitle = title; // 更新选中的标题
      this.messageList=[];
      // 可以在这里传递参数
      this.passParameter(title); // 例如，调用一个方法传递参数
      this.getlistbox();
    },
    passParameter(title) {
 
      // 在这里可以进行进一步的操作，比如发起 API 请求等
    },
  },
};
</script>

<style scoped>
.titles-wrapper {
  display: flex;
  align-items: center;  /* Align items (text and image) horizontally */
  width: 80%;  /* Limit the width of the titles wrapper */
  overflow: hidden;  /* Hide overflowing content (i.e., the title text) */
}
.titles {
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 13px;
  display: inline-block; /* 使用 inline-block 保证内容在一行显示 */
  color: #333333;
  white-space: nowrap; /* 防止文本换行 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  overflow: hidden; /* 仅隐藏溢出的文本，不影响图片 */
  position: relative; /* 让图片可以相对于标题定位 */
  padding-right: 45px; /* 留出位置给图片 */
}
.titles  img {
  position: absolute;
  right: 3px;
  top: 6px;


}
.content_right ul {
  list-style-type: none; /* 去掉列表项的默认样式 */
  padding: 0; /* 去掉内边距 */
  margin: 0; /* 去掉外边距 */
  height: 100%;
}

.content_right li {
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  justify-content: space-between; /* 左右对齐 */

  transition: color 0.3s; /* 添加过渡效果 */
}

.hovered .titles {
  color: #1e4398; /* 鼠标悬停时标题颜色 */
  cursor: pointer;
}

.new-icon {
  margin-left: 4px; /* 新图标与标题之间的间距 */
  width: 36px;
  height: 18px;
}

.date {
  margin-left: auto; /* 日期靠右对齐 */
  font-size: 12px; /* 日期字体大小 */
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #666666;
}
.left-top {
 height: 100%;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0px 2px 6px 0px rgba(139, 157, 175, 0.1);
  border-radius: 10px;
}

.headersleft {
  padding: 20px;
  display: flex;
  justify-content: space-between;
}
.headersleft .headers_left span {
  font-family: "PingFang SC", sans-serif;
  font-weight: bold;
  font-size: 18px;
  color: #323333;
}
.headers_right{
  display: flex;
}
.headers_right .headers_right_title {

  font-family: PingFang SC;
  font-weight: 500;
  font-size: 12px;
  color: #666666;
  margin-left: 15px;
  cursor: pointer;
  transition: background 0.3s; /* 添加过渡效果 */
  padding: 10px 4px;
}
.carous_img {
  width: 100%;
  height: 100%;
}

.headersleft span {
  border-left: 4px solid #1e4398;
  padding-left: 9px;
}
/* 隐藏滚动条 - 适用于 Chrome 和 Safari */
.content::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}

/* 隐藏滚动条 - 适用于 Firefox */
.content {
  scrollbar-width: none; /* 隐藏滚动条 */
}

.content {
  margin-top: 10px; /* 内容与标题之间的间距 */
  display: flex;
  margin: 0 20px;
      height: calc(100% - 120px);
      overflow-y: auto;
}


.content_left {
  padding-right: 10px; /* 左侧内容与右侧内容之间的间距 */
  flex: 0 0 40%;
}
.content_center {
  flex: 0 0 1%;
}

.content_right {
  display: flex;
  flex-direction: column; /* 列表垂直排列 */
}
.content_right {
  flex: 1;
}

.content_right ul {
  list-style-type: none; /* 去掉列表项的默认样式 */
  padding: 0; /* 去掉内边距 */
  margin: 0; /* 去掉外边距 */
}

.content_right li {
  line-height: 30px;
}
.bottom {
  font-family: PingFang SC;
  font-weight: 700;
  font-size: 14px;
  color: #1e4398;
  text-align: right;

  margin-top: 10px;
  padding: 0 20px;
}
.bottom span{
  cursor: pointer;
}
.headers_right_title.selected {
  background-image: url('../../assets/img/headerseled.png'); /* 添加背景图 */
  background-size: 100% 100%; /* 根据需要调整背景图大小 */
  color: #fff; /* 选中时文字颜色 */
}
</style>
